<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="./css/reset.css">
    <title>注册</title>
    <style>
        .error {
            color: red;
            font-size: 12px;
            margin-left: 27%;
        }

        #wrap {
            width: 100%;
            height: 100vh;
            min-width: 1200px;
        }

        header {
            width: 100%;
            height: 8vh;
            background: #ffffff url('./img/logo.png') left center no-repeat;
            background-size: 10%;
        }

        main {
            width: 100%;
            height: 82.5vh;
            background: url("./img/thbg.png") left center no-repeat;
            background-size: 100%;
            position: relative;
            padding-top: 4.5vh;
        }

        #oneForm {
            width: 40%;
            height: 80vh;
            background: #fff;
            border-radius: 10px;
            margin-left: 30%;
        }

        #oneForm ul {
            width: 88%;
            height: 60vh;
            padding-top: 4vh;

            margin-left: 6%;

        }

        #oneForm ul li {
            width: 100%;
            height: 9vh;
            font-size: 16px;
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
        }

        #oneForm ul em {
            color: #f67d7d;
        }

        #oneForm ul span {
            color: #606266;
            width: 21%;
            display: inline-block;
        }

        #oneForm ul input {
            width: 68%;
            height: 5vh;
            border: 2px solid #dcdfe6;
            border-radius: 6px;
            margin-left: 4%;
        }

        #middle {
            width: 100%;
            height: 6vh;
            font: 14px/6vh "simhei";
            text-align: center;
            color: #606266;
        }

        #bottom {
            width: 50%;
            height: 7vh;
            margin-left: 25%;
            display: flex;
            justify-content: space-between;
            position: relative;

        }

        #bottom input {
            width: 40%;
            font: 16px/7vh "simhei";
            text-align: center;
            border: 1px solid #999999;
            border-radius: 6px;
        }

        #bottom input:nth-of-type(2) {
            background: #fff;
        }

        #bottom .active2 {
            color: #fff;
            background: #3590e6;
        }

        #bottom strong {
            width: 40%;
            height: 7vh;
            position: absolute;
            top: 0;
            left: 0;
            background: #fff;
            opacity: 0.6;
        }

        footer {
            width: 100%;
            height: 5vh;
            background: #ffffff;
            font: 16px/5vh "simhei";
            text-align: center;
            color: #999999;
        }

        #oneForm #yanzheng {
            width: 30%;
        }
        #canvas{
            border:2px solid #dcdfe6;
            margin-left:2%;
            border-radius: 5px;
        }
        .canvas{
            margin-top:30px;
            text-decoration: underline;
        }
    </style>
</head>

<body>
    <div id="wrap">
        <header></header>
        <main>
            <form id="oneForm">
                <ul>
                    <li><em>* </em><span>姓名</span><input type="text" placeholder="请输入姓名" id="user" name="username"
                            autocomplete="off"></li>
                    <li><em>* </em><span>手机号</span><input type="text" placeholder="请输入手机号" id="phon" name="phonnumber"
                            autocomplete="off">
                    </li>
                    <li><em>* </em><span>邮箱</span><input type="text" placeholder="请输入邮箱" id="email" name="emailnumber"
                            autocomplete="off">
                    </li>
                    <li><em>* </em><span>密码</span><input type="text" placeholder="请输入密码" id="pass" name="password"
                            autocomplete="off"></li>
                    <li><em>* </em><span>确认密码</span><input type="text" placeholder="请确认密码" id="qr_pass" name="qr_pass"
                            autocomplete="off">
                    </li>
                    <li><em>* </em><span>验证码</span>
                        <input type="text" placeholder="请输入验证码" id="yanzheng" name="yanzheng" autocomplete="off">
                        <canvas id="canvas" width="100%" height="43"></canvas>
                        <a class="canvas" href="javascript:void(0)">看不清，换一张</a>
                    </li>
                    <li><em>* </em><span>手机验证码</span><input type="text" placeholder="请输入手机验证码" id="phonyanzheng"
                            name="phonyanzheng" inputmode="" autocomplete="off"></li>
                </ul>
                <div id="middle">
                    <input type="checkbox">
                    <span id="Check">我已阅读并接受《量子矩阵服务使用协议》</span>
                </div>
                <div id="bottom">
                    <strong></strong>
                    <input type="submit" value="立即注册" class="active2">
                    <input type="button" value="重置">
                </div>
            </form>
        </main>
        <footer>量子矩阵公司 版权所有 Copyright @ 2018-2019 QUTO Corporation,All Rights Reserved</footer>
    </div>
</body>
<script src="./js/jquery-3.4.1.js"></script>
<script src="./js/jquery.validate.js"></script>
<script src="./js/messages_zh.js"></script>
<script src="./js/url.js"></script>
<script>
    $(function () {
        var show_num = [];
        draw(show_num);

        $(".canvas").on('click', function () {
            draw(show_num);
        })
        $(".RegNow").on('click', function () {
            var val = $(".input-val").val().toLowerCase();
            var num = show_num.join("");
            if (val == '') {
                alert('请输入验证码！');
            } else if (val == num) {
                alert('提交成功！');
                $(".input-val").val('show_num');
                // draw(show_num);

            } else {
                alert('验证码错误！请重新输入！');
                $(".input-val").val('');
                draw(show_num);
            }
        })
    })

    function draw(show_num) {
        var canvas_width = $('#canvas').width();
        var canvas_height = $('#canvas').height();
        var canvas = document.getElementById("canvas");//获取到canvas的对象，演员
        var context = canvas.getContext("2d");//获取到canvas画图的环境，演员表演的舞台
        canvas.width = canvas_width;
        canvas.height = canvas_height;
        var sCode = "A,B,C,E,F,G,H,I,J,K,L,M,N,P,Q,R,S,T,W,X,Y,Z,1,2,3,4,5,6,7,8,9,0";
        var aCode = sCode.split(",");
        var aLength = aCode.length;//获取到数组的长度

        for (var i = 0; i <= 3; i++) {
            var j = Math.floor(Math.random() * aLength);//获取到随机的索引值
            var deg = Math.random() * 30 * Math.PI / 180;//产生0~30之间的随机弧度
            var txt = aCode[j];//得到随机的一个内容
            show_num[i] = txt.toLowerCase();
            var x = 10 + i * 20;//文字在canvas上的x坐标
            var y = 20 + Math.random() * 8;//文字在canvas上的y坐标
            context.font = "bold 23px 微软雅黑";

            context.translate(x, y);
            context.rotate(deg);

            context.fillStyle = randomColor();
            context.fillText(txt, 0, 0);

            context.rotate(-deg);
            context.translate(-x, -y);
        }
        for (var i = 0; i <= 5; i++) { //验证码上显示线条
            context.strokeStyle = randomColor();
            context.beginPath();
            context.moveTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.lineTo(Math.random() * canvas_width, Math.random() * canvas_height);
            context.stroke();
        }
        for (var i = 0; i <= 30; i++) { //验证码上显示小点
            context.strokeStyle = randomColor();
            context.beginPath();
            var x = Math.random() * canvas_width;
            var y = Math.random() * canvas_height;
            context.moveTo(x, y);
            context.lineTo(x + 1, y + 1);
            context.stroke();
        }
    }

    function randomColor() {//得到随机的颜色值
        var r = Math.floor(Math.random() * 256);
        var g = Math.floor(Math.random() * 256);
        var b = Math.floor(Math.random() * 256);
        return "rgb(" + r + "," + g + "," + b + ")";
    }
    $('#middle input ').click(function () {
        if ($('#middle input').prop('checked') == true) {

            $("strong").css('display', "none");
        }
    })
    $('#bottom input:last-of-type').click(function () {
        location.href = "./06-Amy-register.html";
    });
    $('#oneForm').validate({
        rules: {
            username: 'required',
            phonnumber: {
                required: true,
                minlength: 11,
                maxlength: 11,
            },
            emailnumber: {
                required: true,
                minlength: 6,
                maxlength: 16,
            },
            password: {
                required: true,
                minlength: 6,
                maxlength: 16,
            },
            qr_pass: {
                required: true,
                minlength: 6,
                maxlength: 16,
                equalTo: "#pass"
            },
            yanzheng: {
                required: true,
                minlength: 4,
                maxlength: 4
            },
            phonyanzheng: {
                required: true,
                minlength: 6,
                maxlength: 6
            }
        },
        messages: {
            username: '请输入内容',
            phonnumber: {
                required: '请输入手机号',
                minlength: '请输入正确的手机号格式',
                maxlength: '请输入正确的手机号格式',
            },
            emailnumber: {
                required: '请输入邮箱',
                minlength: '请输入有效的邮箱格式',
                maxlength: '请输入有效的邮箱格式',
            },
            password: {
                required: '请输入密码',
                minlength: '请输入6-16位字符',
                maxlength: '请输入6-16位字符'
            },
            qr_pass: {
                required: '请确认密码',
                minlength: '请输入6-16位字符',
                maxlength: '请输入6-16位字符',
                equalTo: '两次输入不一致'
            },
            yanzheng: {
                required: '请输入验证码',
                minlength: '请输入有效地验证码',
                maxlength: '请输入有效地验证码',
            },
            phonyanzheng: {
                required: '请确认验证码',
                minlength: '请输入有效地手机验证码',
                maxlength: '请输入有效地手机验证码'
            }
        },

        submitHandler: function () {
            $.ajax({
                url: SetUrl.registerUrl,
                type: 'POST',
                dataType: 'json',
                data: {
                    empName: $('#user').val(),
                    telphone: $('#phon').val(),
                    email: $('#email').val(),
                    password: $('#pass').val()
                },
                success: function (data) {
                    console.log(data)
                    if (data.code == 100) {
                        alert('注册成功');
                        window.location.href = "./05-Amy-denglu.html";
                    }
                },
                error: function (xhr, errorInfo) {
                    alert('失败')
                }

            })
            alert("提交事件!");
        }
    });
</script>

</html>